<template>
	<view class="crm">
		
		<view class="tops1">
			<view class="searchBox">
				<view class="search">
					<view class="inp">
						<u-search @change="changeInpFn" :clearabled="true"  @clear="search" @search="search" bg-color="#fff" :show-action="false" height="60" search-icon=""
							placeholder-color="rgba(15, 20, 23, 0.3)" placeholder="请输入要查询的内容" v-model="keyword">
						</u-search>
					</view>
					<view class="btns" @click="search">
						搜索
					</view>
				</view>
				<image @click="show=true" class="Scan-code"
					src="https://oss.6mate.cn/mini/Calendar.png" mode="">
				</image>
			</view>
		
		</view>
		
		<view  v-if="list1.length" class="scroll-content list">
			
			<!-- <view v-for="(item, index) in dataList" :key="index" class="item">
				
				<text>{{ item }}</text>
			</view> -->
			
			<view class="item" v-for="(item,index) in list1">
				<view class="time">
					{{item.genTime}}
				</view>
				<view v-if="item.speechType=='TEXT'" class="detail">
					<view class="photo">
						{{item.speechCategoryName}}
					</view>
					<view class="info">
						<view class="top">
							<u-parse :html="item.content"></u-parse>
			
						</view>
						<view @click="copyTextToClipboard(item.content)" class="btn">
							<image src="https://oss.6mate.cn/mini/copyBnts.png" mode=""></image>
							快捷复制
						</view>
					</view>
				</view>
				<view v-else class="imgs">
					<view class="photo">
						{{item.speechCategoryName}}
					</view>
					<view class="info">
						<view class="img">
							<view class="imgBox">
									<image class="contentAimg" :src="item.imageUrl" mode="widthFix"/>
							
							
								<!-- <img style="width: 100%; display: block;" :src="item.imageUrl" alt=""> -->
								<u-upload class="uploadImg" :disabled="false" :deletable="false" 
									:show-progress="false" :max-count="1" :file-list="[{url:item.imageUrl}]"></u-upload>
								<!-- <image :src="item.imageUrl" mode=""></image> -->
							
							</view>
							
							</view>
						<view @click="download(item.imageUrl)" class="btn">
							<image src="https://oss.6mate.cn/mini/To-bottom.png" mode=""></image>
							快捷下载
						</view>
					</view>
				</view>
			
			</view>
		</view>
		<view v-else class="empty" style="padding-top: 150px;">
			<view v-if="!list1.length && senDate" class="emptyAddress-box">
				<u-empty text="暂无内容" mode="news"></u-empty>
			</view>
		</view>
		
		<u-calendar active-bg-color="#FA4A53" btn-type="error" range-color="rgba(250, 74, 83, 0.4)" active-color="#fff"
			v-model="show" mode="date" @change="change"></u-calendar>
		
		
	</view>
</template>

<script>
	export default {

		data() {
			return {
				dataList: [], // 存储数据的数组
				currentPage: 1, // 当前页码
				pageSize: 15, // 每页数据条数
				loading: false, // 是否正在加载数据的标志
				canExecute: true,
				
				show: false,
				pageCount: 0, //总共多少条数据
				formData: {
					pageSize: 15, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				status: "more",
				senDate: false,
				list1: [],
				keyword: '',
				date: '',
				speechCategoryId: '',
				paddingTop: ''
			}
		},

		onLoad(e) {
			this.currentPage = 1
			
				
			
			this.speechCategoryId = e?.id
			uni.setNavigationBarTitle({
				title: e.title
			});
			
			this.loadNextPage();
			// this.getlist()
			// this.getHieght()
			
			
		},
		onPageScroll(e) {

				// e.scrollTop 表示当前页面滚动的距离
				console.log('页面滚动距离：', e.scrollTop);
				
				if (e.scrollTop <= 50 && this.canExecute) {
					console.log('&&&&&&&');
					
					if(this.formData.page>this.pageCount){
						return
					}
					// 更新当前页码
					this.formData.page++;
					this.loadNextPage();
					// 执行一次后将标志位设置为false，不允许再次执行
					this.canExecute = false;
				} else if (e.scrollTop > 50) {
					// 当滚动距离大于50时，重新允许执行方法
					this.canExecute = true;
				}
			
		},
		methods: {
			
			changeInpFn(e){
				
				if(e==''){
					this.formData.page = 1;
					// this.getlist('fresh');
					this.loadNextPage()
				}
				
			},
			download(imageUrl) {
				
				uni.showToast({
					title: "下载中",
					icon: "loading"
				})
				uni.downloadFile({
					url: imageUrl,
					success: downloadResult => {
						if (downloadResult.statusCode === 200) {
							// 下载成功，保存图片到系统相册
							uni.saveImageToPhotosAlbum({
								filePath: downloadResult.tempFilePath,
								success: () => {
									uni.showToast({
										title: '图片保存成功'
									});
								},
								fail: () => {
									uni.showToast({
										title: '图片保存失败',
										icon: 'none'
									});
								}
							});
						} else {
							uni.showToast({
								title: '图片下载失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '图片下载失败',
							icon: 'none'
						});
					}
				});
			
			},
			
			copyTextToClipboard(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log('复制成功');
						// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000,
						});
					},
					fail: function() {
			
						// 可以添加错误处理或用户友好的提示
					}
				});
			},
			change(e) {
				console.log(e, 3333);
				this.date = e.result
			
				this.formData.page = 1
				this.list1 = []
				// this.getlist();
				this.loadNextPage()
			},
			getHieght() {
				uni.createSelectorQuery().select('.tops1').boundingClientRect((rect) => {
					console.log(rect.height, 66666);
					this.paddingTop = rect.height + 12 + 'px'
				}).exec()
			},search() {
				this.formData.page = 1
				this.list1 = []
				// this.getlist();
				this.loadNextPage()
			},
			
			
			
			// 加载下一页数据
			loadNextPage() {
				// 如果正在加载中，则不触发重复请求
				if (this.loading) return;
				this.loading = true; // 设置加载状态为true，防止重复加载
				
					this.senDate = false;
					let query = {
						pageIndex: this.formData.page,
						pageSize: this.formData.pageSize,
						keyword: this.keyword,
						date: this.date,
						speechCategoryId: this.speechCategoryId //卡类型ID列表	
					}
				
					this.$u.api
						.speechPage(query)
						.then((res) => {
							this.senDate = true;
							if (res.code == 'ok') {
								this.pageCount = res.data.pageCount;
								const newlist = res.data.entities;
								this.list1.unshift(...newlist);
								setTimeout(() => {
									if (this.formData.page == 1) {
										console.log(888888888888888);
										this.scrollToBottom();
									} else {
										uni.pageScrollTo({
											scrollTop: 60, // 滚动到页面的目标位置（单位px）
											duration: 300 // 滚动动画的时长，默认300ms，单位 ms
										});
									}
								}, 100);
								
								// 加载完成后，重置加载状态
								this.loading = false;
								
								
							} else {
				
							}
							
						});

			},
			// 生成模拟数据
			generateMockData(count) {
				let newData = [];
				for (let i = 0; i < count; i++) {
					newData.push(`Item ${this.dataList.length + i}`);
				}
				return newData;
			},

			scrollToBottom() {
				uni.createSelectorQuery().select('.scroll-content').boundingClientRect(data => {
					
					console.log(data,7777777);
					if (data) {
						uni.pageScrollTo({
							scrollTop: 50000,
							duration: 0 // 如果想立即滚动，可以设置为0
						});
					}
				}).exec();
			},
			// onScroll(event) {
			//   // event.detail.scrollTop 是当前滚动条的垂直位置
			//   console.log('滚动位置:', event.detail.scrollTop);
			// }
		}
	}
</script>

<style>
	page {
		background: #F6F6F6;
	}
</style>
<style scoped lang="scss">
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}
	
	.crm {
		padding: 0;

		/deep/ .u-list-item {
			margin: 0 !important;
			border-radius: 8rpx 8rpx 0 0 !important;
		}

		/deep/ .u-preview-image {
			border-radius: 8rpx 8rpx 0 0 !important;
		}

		.toAppBox {
			margin: 0 auto;
			width: 670rpx;
			background: #FFFFFF;
		}

		.tops1 {
			background: #FFFFFF;
			padding: 0 32rpx 0;
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			z-index: 9;
		}

		.list {
			padding-top: 50px;
			// margin-top: -24rpx;
			padding-bottom:80rpx;
			.item {
				padding: 0 40rpx 0 32rpx;

				.time {
					padding: 24rpx 0;
					text-align: center;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(15, 20, 23, 0.6);
					line-height: 28rpx;
				}

				.imgs {
					// width: 280rpx;
					// height: 498rpx;
					border-radius: 8rpx 8rpx 0rpx 0rpx;
					display: flex;
					align-items: flex-start;
					overflow: hidden;

					.photo {
						margin-right: 40rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						line-height: 30rpx;
						width: 72rpx;
						height: 72rpx;
						background: #FA4A53;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.info {
						flex: 1;
						// width: 280rpx;
						border-radius: 8rpx 8rpx 0rpx 0rpx;
						background: #FFFFFF;

						.img {
							position: relative;
							.imgBox{
								width: 50%;
								margin: 30rpx auto 0;
								image {
									width: 100%;
									border-radius: 8rpx 8rpx 0rpx 0rpx;
									// width: 280rpx;
									// height: 498rpx;
								}
								.uploadImg{
									position: absolute;
									left: 0;
									top: 0;
									right: 0;
									bottom: 0;
									background: palegoldenrod;
									opacity: 0;
									/deep/ .u-list-item {
										position: absolute !important;
										top: 0;
										bottom: 0;
										right: 0;
										left: 0;
										width: 100% !important;
										height: 100% !important;
									}
								}
								
							}
							
						}

						.btn {
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #FA4A53;
							line-height: 40rpx;
							padding: 20rpx 0;

							image {
								width: 32rpx;
								height: 32rpx;
								margin-right: 8rpx;
							}
						}
					}
				}

				.detail {
					display: flex;
					align-items: flex-start;

					.photo {
						margin-right: 40rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						line-height: 30rpx;
						width: 72rpx;
						height: 72rpx;
						background: #FA4A53;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.info {
						flex: 1;

						border-radius: 8rpx 8rpx 8rpx 8rpx;
						background: #FFFFFF;

						.top {
							padding: 20rpx 20rpx 0;
							border-bottom: 2rpx solid #F6F6F6;
							text-align: justify;
							color: rgba(15, 20, 23, 0.7);
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							line-height: 40rpx;
						}

						.btn {
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #FA4A53;
							line-height: 40rpx;
							padding: 20rpx 0;

							image {
								width: 32rpx;
								height: 32rpx;
								margin-right: 8rpx;
							}
						}
					}
				}
			}
		}



		.searchBox {
			margin-bottom: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.Scan-code {
				width: 48rpx;
				height: 48rpx;
				margin-left: 20rpx;
			}
		}

		.search {
			flex: 1;

			height: 64rpx;
			background: #FFFFFF;
			border-radius: 152rpx 152rpx 152rpx 152rpx;
			border: 2rpx solid #FA4A53;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.inp {
				flex: 1;
			}

			.btns {
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				margin: 4rpx;
				width: 128rpx;
				height: 56rpx;
				background: #FA4A53;
				border-radius: 152rpx 152rpx 152rpx 152rpx;
			}
		}

	}
</style>
